<!--
 * @Author: quit
 * @Date: 2021-11-23 10:20:20
 * @LastEditTime: 2022-01-15 14:25:38
 * @Descripttion: 系统菜单
-->
<template>
    <div id="SubsysManager-container">
        <div class="app-container" style="height: 100%">
            <el-card>
                <el-row>
                    <el-button type="primary" size="mini" icon="el-icon-circle-plus-outline" @click="addItemBtn">{{ '添加菜单' }}</el-button>
                    <el-button type="primary" size="mini" @click="toggleRowExpansion(true)">全部展开</el-button>
                    <el-button type="primary" size="mini" @click="toggleRowExpansion(false)">全部折叠</el-button>
                </el-row>
                <el-row>
                    <el-table
                        ref="dataTreeList"
                        v-loading="loading"
                        lazy
                        :max-height="tableHeight"
                        :load="tableLoad"
                        :data="tableData"
                        row-key="menuid"
                        :default-expand-all="false"
                        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
                    >
                        <el-table-column type="index" label="编号" min-width="40" fixed="left" />
                        <el-table-column header-align="center" prop="menuname" label="菜单名称" min-width="180" />
                        <el-table-column prop="menuicon" label="菜单icon" min-width="120" />
                        <el-table-column prop="menulevel" label="菜单标识" min-width="100" />
                        <el-table-column prop="menuurl" label="菜单URL" min-width="280" />
                        <el-table-column prop="menulevel" label="排序号" min-width="100" />
                        <el-table-column prop="ismenu" label="是否菜单" min-width="80" />
                        <el-table-column prop="isshow" label="是否显示" min-width="80" />
                        <el-table-column header-align="center" align="center" fixed="right" :label="$t('table.operable')" min-width="290">
                            <template slot-scope="scope">
                                <el-button type="primary" size="mini" @click="itmeAddBtn(scope.row)">{{ '添加' }}</el-button>
                                <el-button type="success" size="mini" @click="editHandle(scope.row)">{{ $t('button.edit') }}</el-button>
                                <el-button type="danger" size="mini" @click="deleteHandle(scope.row)">{{ $t('button.delete') }}</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-row>
            </el-card>
        </div>
        <!-- 添加弹框 -->
        <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="35%" @close="addDialogClose">
            <div class="dialog-from-container">
                <el-form :model="dialogForm" label-position="right">
                    <el-row>
                        <el-col :span="11">
                            <el-form-item label="菜单名" :label-width="formLabelWidth">
                                <el-input v-model="dialogForm.menuname" placeholder="请输入菜单名" autocomplete="off" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="菜单类型" :label-width="formLabelWidth">
                                <el-select v-model="dialogForm.menutype" clearable placeholder="请选择菜单类型">
                                    <el-option v-for="(item, index) in meunTypeData" :key="index" :label="item.label" :value="item.value" />
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="11">
                            <el-form-item label="隶属菜单" :label-width="formLabelWidth">
                                <el-select v-model="dialogForm.menuparent" clearable filterable placeholder="请选择活动区域">
                                    <el-option v-for="(item, index) in atData" :key="index" :label="item.label" :value="item.value" />
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="菜单排序" :label-width="formLabelWidth">
                                <el-input v-model="dialogForm.menulevel" placeholder="请输入菜单排序" autocomplete="off" />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="11">
                            <!-- Todo -->
                            <el-form-item label="默认图标" :label-width="formLabelWidth">
                                <el-select v-model="dialogForm.menuicon" clearable placeholder="请选择活动区域">
                                    <el-option v-for="(item, index) in iconData" :key="index" :label="item.label" :value="item.value" />
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="是否菜单" :label-width="formLabelWidth">
                                <el-select v-model="dialogForm.ismenu" clearable placeholder="请选择活动区域">
                                    <el-option v-for="(item, index) in isMenuData" :key="index" :label="item.label" :value="item.value" />
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="23">
                            <el-form-item label="菜单URL" :label-width="formLabelWidth">
                                <el-input v-model="dialogForm.menuurl" type="textarea" :rows="3" placeholder="请输入菜单URL" />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="11">
                            <el-form-item label="是否显示" :label-width="formLabelWidth">
                                <el-select v-model="dialogForm.isshow" placeholder="请选择活动区域">
                                    <el-option v-for="(item, index) in isShowData" :key="index" :label="item.label" :value="item.value" />
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button v-if="addState === 0 || addState === 1" type="primary" @click="addMenu">确 定</el-button>
                <el-button v-if="addState === 2" type="primary" @click="editMenu">提 交</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import $ from 'jquery'
import { getData } from '@/utils/auth'
import { getMenuList, getMenuNameList, addMenu, editMenu, deleteMenu } from '@/api/BotRequest'

export default {
    components: {},
    data() {
        return {
            botData: {},
            loading: false,
            tableHeight: null,
            tableData: [],
            dialogVisible: false,
            dialogForm: {
                isshow: null,
                menuparent: null, // Todo
                appname: '',
                menuname: '',
                menuicon: '',
                menulevel: null,
                menuurl: null,
                appid: null,
                menutype: null,
                ismenu: null
            },
            formLabelWidth: '80px',
            meunTypeData: [
                { value: 0, label: '系统菜单' },
                { value: 1, label: '用户菜单' }
            ],
            atData: [],
            isMenuData: [
                { value: 0, label: '目录' },
                { value: 1, label: '菜单' }
            ],
            isShowData: [
                { value: 0, label: '不显示' },
                { value: 1, label: '显示' }
            ],
            iconData: [{}],
            addState: 0,
            dialogTitle: ''
        }
    },
    // 监听属性 类似于data概念
    computed: {},
    // 监控data中的数据变化
    watch: {},
    created() {
        this.botData = getData('BotData')
        this.getMenuList()
    }, // 生命周期 - 创建完成（可以访问当前this实例）
    mounted() {
        this.setTableHeight()
        window.onresize = () => {
            this.setTableHeight()
        }
    }, // 生命周期 - 挂载完成（可以访问DOM元素）
    beforeCreate() {}, // 生命周期 - 创建之前
    beforeMount() {}, // 生命周期 - 挂载之前
    beforeUpdate() {}, // 生命周期 - 更新之前
    updated() {}, // 生命周期 - 更新之后
    beforeDestroy() {}, // 生命周期 - 销毁之前
    destroyed() {}, // 生命周期 - 销毁完成
    activated() {}, // 如果页面有keep-alive缓存功能，这个函数会触发
    // 方法集合
    methods: {
        // 动态设置表格高
        setTableHeight() {
            var num = $(window).height() - 126
            this.tableHeight = num
        },

        // 获取类型基本数据
        async getMenuList() {
            this.loading = true
            const { data } = await getMenuList(this.botData.id)
            const res = await getMenuNameList(this.botData.id)
            this.atData = res.data
            this.tableData = data
            this.loading = false
        },

        // 全部展开与折叠
        forArr(arr, isExpand) {
            arr.forEach(i => {
                this.$refs.dataTreeList.toggleRowExpansion(i, isExpand)
                if (i.children) {
                    this.forArr(i.children, isExpand)
                }
            })
        },
        toggleRowExpansion(isExpansion) {
            this.forArr(this.tableData, isExpansion)
        },

        // 添加按钮
        addItemBtn() {
            this.addState = 0
            this.dialogTitle = '添加菜单项'
            this.dialogForm.appid = this.botData.id
            this.dialogForm.menuparent = -1
            this.dialogVisible = true
        },

        /* 弹出框事件 */
        // 弹出框关闭事件
        addDialogClose() {
            this.dialogForm = {
                isshow: null,
                menuparent: null, // Todo
                appname: '',
                menuname: '',
                menuicon: '',
                menulevel: null,
                menuurl: null,
                appid: null,
                menutype: null,
                menuid: null,
                ismenu: null
            }
        },
        // 确定按钮
        async addMenu() {
            try {
                const { message } = await addMenu(this.dialogForm)
                this.$message.success(message)
            } catch (error) {
                console.log(error)
                this.$message.error(error)
            } finally {
                this.dialogVisible = false
                await this.getMenuList()
            }
        },
        // 提交按钮
        async editMenu() {
            try {
                const { message } = await editMenu(this.dialogForm)
                this.$message.success(message)
            } catch (error) {
                console.log(error)
                this.$message.error(error)
            } finally {
                this.dialogVisible = false
                await this.getMenuList()
            }
        },

        /* tabal-item 操作 */
        // 添加
        itmeAddBtn(data) {
            this.addState = 1
            this.dialogTitle = '添加子级菜单项'
            this.dialogVisible = true
            this.dialogForm.appid = this.botData.id
            this.dialogForm.menuparent = data.menuid
        },
        // 修改
        editHandle(data) {
            this.addState = 2
            this.dialogTitle = '编辑菜单项'
            this.dialogForm = data
            this.dialogVisible = true
        },
        // 删除
        deleteHandle(data) {
            this.$confirm('此操作将删除当前项目, 是否继续?', '确认操作', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then(async() => {
                    const { message } = await deleteMenu(data.menuid)
                    await this.getMenuList()
                    this.$message.success({ message })
                })
                .catch(error => {
                    console.log(error)
                })
        },

        // 懒加载(预留API)
        tableLoad() {}
    }
}
</script>
<style lang="scss" scoped>
::v-deep .el-dialog__body {
    padding: 15px 20px 20px;
}
::v-deep .el-form-item__label {
    text-align: center;
}

.dialog-from-container {
    .el-row {
        margin: 10px 0;
    }
    .el-input,
    .el-select,
    .el-textarea {
        width: calc(100% - 20px);
    }
}
</style>
